<template>
	<view class="wrap wrap-gHeader">
		<view class="app_gHeaderFixed">
			<g-header title="客户详情" rtype="del" @rightclick="onDelTap"></g-header>
		</view>
		<view class="userInfo app_arrow" @click="onSkipTap('addCustomer')">
			<view class="userInfo-user">
				<text>{{customInfo.name}}</text>
				<text>{{customInfo.tel}}</text>
			</view>
			<view class="userInfo-addr">{{customInfo.showAddr}}</view>
		</view>
		<view class="account" v-if="customInfo.saleslipVos && customInfo.saleslipVos.length > 0">
			<view class="account-header">流水信息</view>
			<view class="account-list">
				<block>
					<view class="account-item" v-for="(item, index) in customInfo.saleslipVos" :key="index">
						<view class="account-T">
							<view class="account-user app_ellipsis2">
								<text>{{item.customerText}}</text>
								<!-- <text>15817909823</text> -->
							</view>
							<view class="account-price">
								<text>￥</text>
								<text>{{item.contractPrices}}</text>
							</view>
						</view>
						<view class="account-B">
							<view class="account-BL">
								<view class="account-tag online" v-if="item.intoType == 0">线上</view>
								<view class="account-tag" v-if="item.intoType == 1">线下</view>
								<view class="account-no">{{item.saleslipCode}}</view>
							</view>
							<view class="account-date">{{item.createDate}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view class="btn">
			<g-btn title="创建销售单" :customstyle="{height: '70rpx',fontSize: '32rpx'}" @click="onSkipTap('addSalesOrder')"></g-btn>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				customInfo: {}
			}
		},
		onLoad(options) {
			this.id = options.id || ''
			this.updatePage()
		},
		onUnload() {
			uni.$off('update-customerList', this.updatePage)
		},
		methods: {
			updatePage() {
				this.getCustomInfo()
			},
			onSkipTap(type) {
				const urlObj = {
					addCustomer: () => {
						uni.$off('update-customerList', this.updatePage)
						uni.$on('update-customerList', this.updatePage)
						uni.navigateTo({
							url: `/pages/customerManagement/addCustomer?pageType=edit&userInfo=${JSON.stringify(this.customInfo)}`
						})
					},
					addSalesOrder: () => {
						let customer = JSON.stringify(this.customInfo)
						uni.navigateTo({
							url: `/pages/salesManagerment/addSalesOrder?customer=${customer}`
						})
					}
				}
				this.$g_util.navigationTo(urlObj, type)
			},
			onDelTap() {
				uni.showModal({
					title: '提示',
					content: '确定要删除该客户信息',
					confirmText: '删除',
					confirmColor: '#ff3333',
					success: res => {
						if (res.confirm) {
							this.$g_api.saleslipDelCustomer({
								id: this.id
							}).then(({
								data
							}) => {
								uni.showToast({
									title: '删除成功',
								})
								uni.$emit('update-customerList')
								setTimeout(() => {
									uni.navigateBack()
								}, 1500)
							})
						}
					}
				})
			},
			getCustomInfo() {
				this.$g_api.saleslipGetCustomer({
					id: this.id
				}).then(({
					data
				}) => {
					if (data) {
						data.showAddr = data.provinceStr + data.cityStr + data.countyStr + data.address
						this.customInfo = data
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap {
		padding-bottom: calc(constant(safe-area-inset-bottom) + 100rpx + 20rpx);
		padding-bottom: calc(env(safe-area-inset-bottom) + 100rpx + 20rpx)
	}

	.app_arrow {
		&::after {
			right: 30rpx;
		}
	}

	.userInfo {
		padding: 30rpx;
		border-top: 1px solid $g-border-color;
		background-color: #fff;
	}

	.userInfo-user {
		margin-bottom: 20rpx;
		font-size: 30rpx;

		text {
			&:first-child {
				margin-right: 20rpx;
				font-weight: bold;
			}
		}
	}

	.userInfo-addr {
		font-size: 24rpx;
		color: #999;
	}

	.account {}

	.account-header {
		line-height: 90rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		color: #333;
	}

	.account-list {
		min-height: 500rpx;
		background-color: #fff;
	}

	.account-item {
		padding: 30rpx;
		border-bottom: 1px solid $g-border-color;
	}

	.account-T {
		display: flex;
		justify-content: space-between;
		margin-bottom: 28rpx;
	}

	.account-user {
		max-width: 500rpx;
		font-size: 30rpx;

		text {
			margin-right: 6rpx;
		}
	}

	.account-price {
		text {
			color: #FF9933;

			&:first-child {
				font-size: 24rpx;
			}

			&:last-child {
				font-size: 30rpx;
			}
		}
	}

	.account-B {
		display: flex;
		justify-content: space-between;
	}

	.account-BL {
		display: flex;
	}

	.account-tag {
		width: 60rpx;
		height: 36rpx;
		line-height: 34rpx;
		text-align: center;
		font-size: 18rpx;
		color: #3377FF;
		background: #E5EEFF;
		border-radius: 6rpx;

		&.online {
			color: #FF7733;
			background: #FFF0E8;
		}
	}

	.account-no {
		margin-left: 20rpx;
		font-size: 24rpx;
	}

	.account-date {
		font-size: 24rpx;
		color: #999;
	}

	.btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		left: 0;
		bottom: 0;
		height: 100rpx;
		width: 750rpx;
		box-sizing: content-box;
		background-color: #fff;
		z-index: 999;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}
</style>
